<template>
    <div class="goodsAdd_box">
        <TagReturn :title="'添加商品'"/>
        <n-card  style="margin-bottom: 16px">
    <n-tabs type="line" animated>
      <n-tab-pane name="基础信息" tab="基础信息">
        <div class="step1" >
            <n-form
                ref="formRef"
                :model="formValue"
                :rules="rules"
                class="item_top"
            >
                <n-form-item  label="商品类型" path="goods_type">
                    <n-select
                        clearable
                        class="item-input"
                        v-model:value="formValue.goods_type"
                        placeholder="请选择商品类型"
                        :options="goodsTypeOption"
                        />
                </n-form-item>
                
                <n-form-item  label="商品名称" path="goodsName">
                    <n-input clearable class="item-input" v-model:value="formValue.goodsName" placeholder="请输入商品名称" />
                </n-form-item>

                <n-form-item  label="商品分类">
                    <!-- <n-select
                        clearable
                        class="item-input"
                        v-model:value="formValue.categoryId"
                        placeholder="请选择商品分类"
                        :options="goodsCategoryOptions"
                        /> -->
                        <n-cascader
                        class="item-input"
                          v-model:value="formValue.categoryId"
                          placeholder="请选择商品分类"
                          :expand-trigger="hoverTrigger ? 'hover' : 'click'"
                          :options="options"
                          :check-strategy="checkStrategyIsChild ? 'child' : 'all'"
                          :show-path="showPath"
                          clearable
                          :filterable="filterable"
                          @update:value="handleUpdateValue"
                        />
                </n-form-item>

                <n-form-item  label="品牌商家(不选默认是平台商品)">
                    <!-- <n-select
                        clearable
                        class="item-input"
                        v-model:value="formValue.businessId"
                        placeholder="请选择商品分类"
                        :options="goodsbusinessIdOptions"
                        /> -->
                  <n-select
                v-model:value="formValue.businessId"
                   class="item-input"
                  filterable 
                  multiple
                  placeholder="请选择店铺"
                  
                  :options="storeOptions"
                  clearable
                />
                </n-form-item>

                <n-form-item  label="单位">
                    <n-input-group class="item-input">
                        <n-input  clearable :style="{ width: '600px' }" class="item-input" v-model:value="formValue.goods_unit_num" placeholder="请输入商品名称" />
                        <n-select clearable :style="{ width: '130px' }" class="item-input"
                        v-model:value="formValue.goods_unit"
                        placeholder="请选择单位"
                        :options="goodsunitIdOptions" />
                    </n-input-group>
                </n-form-item>

                 <n-form-item  label="商品编码">
                    <n-input clearable class="item-input" v-model:value="formValue.goods_code" placeholder="请输入商品名称" />
                </n-form-item>
                
                 <n-form-item label="轮播图" >
                    <n-carousel style="width:320px;height:170px" draggable :interval="1000" centered-slides loop v-if="formValue.rotationImgsJson.length"  autoplay>
                        <n-carousel-item v-for="(item,index) in formValue.rotationImgsJson" :key="index" style="width: 100%">
                            <n-image
                                :preview-disabled="true"
                                style="object-fit: contain;display: flex;
                                    justify-content: center;
                                    align-items: center;"
                                :src="Https()+item"/>
                        </n-carousel-item>
                    </n-carousel>
                    <div @click="changeImage('轮播图')" v-if="formValue.rotationImgsJson.length" style="height:135px;width:100px;overflow: hidden;display: flex;padding:12px;
                    justify-content: center; align-items: center;">
                    <n-button @click="List" type="primary" ghost>
                        重新上传
                    </n-button>
                    </div>
                    <div v-else @click="changeImage('轮播图')" class="imageUpload">
                    <n-icon size="24" color="rgb(49, 108, 114)">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><g fill="none"><path d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8V2.5z" fill="currentColor"></path></g></svg>
                    </n-icon>
                    </div>
                </n-form-item>

                <n-form-item  label="商品标签" >
                    <n-select
                        clearable
                        class="item-input"
                        v-model:value="formValue.label_ids"
                        placeholder="请选择商品标签"
                        label-field="labelName"
                        value-field="id"
                        multiple
                        :options="goodsLabelIdOptions"
                        />
                </n-form-item>

                <n-form-item  label="上架方式" path="goods_status">
                    <n-radio-group v-model:value="formValue.goods_status" >
                        <n-space>
                         <n-radio                   
                            :value="'立即上架'"
                            :key="'立即上架'"
                            >
                            立即上架
                        </n-radio>
                        <n-radio
                            :value="'定时上架'"
                            :key="'定时上架'"
                        >
                            定时上架
                            </n-radio>
                        <n-radio
                               :value="'放入仓库'"
                                :key="'放入仓库'"
                            >
                            放入仓库
                        </n-radio>
                        </n-space>
                    </n-radio-group>
                </n-form-item>


                <n-form-item v-if="formValue.goods_status == '定时上架'"  label="上下架时间" path="goods_status">
                    <div style="display: flex;align-items: center;gap:12px">
                        <div style="display: flex;align-items: center;gap:12px">
                            <span>上架时间:</span>
                            <n-date-picker
                                v-model:formatted-value="formValue.goodsBeginTime"
                                value-format="yyyy.MM.dd HH:mm:ss"
                                type="datetime"
                                clearable
                            />
                        </div>

                        <div style="display: flex;align-items: center;gap:12px">
                            <span>下架时间:</span>
                            <n-date-picker
                                v-model:formatted-value="formValue.goodsEndingTime"
                                value-format="yyyy.MM.dd HH:mm:ss"
                                type="datetime"
                                clearable
                            />
                        </div>
                    </div>
                </n-form-item>

                 <n-form-item class="btn-add">
                    <div style="display: flex;gap:12px">
                        <n-button attr-type="button" @click="chongzhi(1)">
                            重置
                        </n-button>
                        <n-button attr-type="button" type="primary" @click="handleValidateClick">
                            校验
                        </n-button>
                    </div>
                </n-form-item>
               
            </n-form>

            

            
        </div>
      </n-tab-pane>
      <n-tab-pane name="规格库存" tab="规格库存">
        <div class="step1">
            <n-form
                ref="formRef"
                :model="formValue"
                :rules="rules"
                class="item_top"
            >
                <n-form-item  label="商品规格类型" path="goodsSkuType">
                    <n-radio-group v-model:value="formValue.goodsSkuType" >
                        <n-space>
                         <n-radio                   
                            :value="'单规格'"
                            :key="'单规格'"
                            >
                            单规格
                        </n-radio>
                        <n-radio
                            :value="'多规格'"
                            :key="'多规格'"
                        >
                            多规格
                            </n-radio>
                        </n-space>
                    </n-radio-group>
                </n-form-item>


                <div v-if="formValue.goodsSkuType == '单规格'">
                    <n-form-item label="预览图" path="previewUrl">
                        <div @click="changeImage('预览图')" v-if="formValue.previewUrl" style="height:135px;width:100px;overflow: hidden;display: flex;padding:0px;
                            justify-content: center; align-items: center;">
                            <n-image
                            :preview-disabled="true"
                            style="object-fit: contain;display: flex;
                                justify-content: center;
                                align-items: center;border: 1px solid #eee;"
                            :src="Https()+formValue.previewUrl"/>
                        </div>
                        <div v-else @click="changeImage('预览图')" class="imageUpload">
                        <n-icon size="24" color="rgb(49, 108, 114)">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><g fill="none"><path d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8V2.5z" fill="currentColor"></path></g></svg>
                        </n-icon>
                        </div>
                    </n-form-item>

                    <n-form-item  label="商品价格" path="goodsPrice">
                        <n-input clearable class="item-input" v-model:value="formValue.goodsPrice" placeholder="请输入商品价格" />
                    </n-form-item>

                    <n-form-item  label="商品划线价" >
                        <n-input clearable class="item-input" v-model:value="formValue.scribePrice" placeholder="请输入划线价" />
                    </n-form-item>

                    <n-form-item  label="商品库存" path="stockNum">
                        <n-input clearable class="item-input" v-model:value="formValue.stockNum" placeholder="请输入商品库存" />
                    </n-form-item>

                    <n-form-item  label="商品编号" >
                        <n-input clearable class="item-input" v-model:value="formValue.goods_number" placeholder="请输入商品编号" >
                          <template #password-visible-icon></template>
                        </n-input>
                    </n-form-item>

                    <n-form-item  label="商品条形码" >
                        <n-input clearable class="item-input" v-model:value="formValue.goods_barCode" placeholder="请输入商品条形码" />
                    </n-form-item>

                    <n-form-item  label="商品重量（KG）" >
                        <n-input clearable class="item-input" v-model:value="formValue.goodsWeight" placeholder="请输入商品重量（KG）" />
                    </n-form-item>

                    <n-form-item  label="体积(m³)" >
                        <n-input clearable class="item-input" v-model:value="formValue.goods_volume" placeholder="请输入体积(m³)" />
                    </n-form-item>
                </div>

                <div v-if="formValue.goodsSkuType == '多规格'">
                    <div>
                      <n-form-item  label="商品划线价" >
                        <n-input clearable class="item-input" v-model:value="formValue.scribePrice" placeholder="请输入划线价" />
                      </n-form-item>
                     <n-form-item label="封面图" path="previewUrl">
                        <div @click="changeImage('预览图')" v-if="formValue.previewUrl" style="height:135px;width:100px;overflow: hidden;display: flex;padding:0px;
                            justify-content: center; align-items: center;">
                            <n-image
                            :preview-disabled="true"
                            style="object-fit: contain;display: flex;
                                justify-content: center;
                                align-items: center;border: 1px solid #eee;"
                            :src="Https()+formValue.previewUrl"/>
                        </div>
                        <div v-else @click="changeImage('预览图')" class="imageUpload">
                        <n-icon size="24" color="rgb(49, 108, 114)">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><g fill="none"><path d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8V2.5z" fill="currentColor"></path></g></svg>
                        </n-icon>
                        </div>
                    </n-form-item>
                    
                    <div style="display: flex;gap:12px">
                        <n-button @click="addGoodsTherSku" >
                        添加其它规格
                        </n-button>
                        <n-button type="error" @click="settingPrice('1')" >
                        重新设置
                        </n-button>
                        <n-select
                          style="width: 260px;"
                          clearable
                          class="item-input"
                          label-field="templateName"
                          value-field="id"
                          filterable
                          @update:value="selectGoodsSku"
                          v-model:value="goodsSkuValue"
                          placeholder="请选择规格模板"
                          :options="goodsSkuList"
                        >
                          <template #header></template>
                          <template #action></template>
                          <template #empty></template>
                        </n-select>
                    </div>

                    <div  class="skubitian" v-for="(item,index) in goodsTherJson" :key="index">
                        <div class="skuTitle">
                        <n-input-group>
                            <n-input style="width:222px" v-model:value="item.name" />
                            <n-input-group-label>规格标题</n-input-group-label>
                        </n-input-group>
                        </div>
                        <div class="skuInput" :style="{'marginTop':index1==0?'':'30px'}" v-for="(item1,index1) in item.list">
                        <div class="skuDelete" style="right:40px" @click="addGoodsTherSkuItem(item,index,item1,index1)">
                            添加规格
                        </div>
                        <div class="skuDelete" @click="skuDelete1(item,index,item1,index1)">
                            删除
                        </div>

                        <!-- 规格名 -->
                        <n-input-group>
                            <n-input v-model:value="item1.skuName" />
                            <n-input-group-label>规格名</n-input-group-label>
                        </n-input-group>
                    
                    
                        <!-- 排序 -->
                        <n-input-group>
                            <n-input @input="skuSrotFun1(item,index)" v-model:value="item1.skuSort" />
                            <n-input-group-label>排序</n-input-group-label>
                        </n-input-group>
            
                        </div>
                    </div>

                    <div v-if="goodsTherJson.length">
                        <div class="skubitian">
                        <div class="skuTitle">
                          <span>设置规格参数</span>
                          <span @click="skuAdd" style="margin-left:20px;font-size:12px;font-weight:100">当前规格添加成模版</span>
                        </div>
                        <div>
                            <div style="color:red">商品属性一键填入</div>
                            <div class="skuInput" >
                            <div style="height:32px;display: flex;align-items: center;gap:20px" >
                            <span>规格图:</span>
                            <div v-if="goodsSkuJsonSum.skuImage" @click="changeImage('一键规格图',index)"  style="height:64px;width:64px;display: flex;
                                    justify-content: center;
                                    align-items: center;">
                                <n-image
                                :preview-disabled="true"
                                style="object-fit: contain;"
                                :src="goodsSkuJsonSum.skuImage"/>
                            </div>
                            <div v-else @click="changeImage('一键规格图',index)" class="imageUpload" style="height:64px;width:64px;">
                                <n-icon size="24" color="rgb(49, 108, 114)">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><g fill="none"><path d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8V2.5z" fill="currentColor"></path></g></svg>
                                </n-icon>
                            </div>
                            </div>
                            <n-input-group>
                            <n-input disabled v-model:value="goodsSkuJsonSum.skuName" />
                            <n-input-group-label>规格值</n-input-group-label>
                            </n-input-group>
                            <n-input-group>
                            <n-input disabled v-model:value="goodsSkuJsonSum.skuId" />
                            <n-input-group-label>编码</n-input-group-label>
                            </n-input-group>
                            <n-input-group >
                            <n-input v-model:value="goodsSkuJsonSum.skuPrice" />
                            <n-input-group-label>价格</n-input-group-label>
                            </n-input-group>
                            <n-input-group >
                            <n-input v-model:value="goodsSkuJsonSum.skuStockNum" />
                            <n-input-group-label>库存</n-input-group-label>
                            </n-input-group>
                            <n-input-group >
                                <n-button @click="skuChongzhi">重置</n-button>
                                <n-button @click="yijianData" type="primary">一键填写</n-button>
                            </n-input-group>
                            
                        </div>
                        </div>

                        <div class="step1" style="margin-top:20px;">
                            <div style="font-weight:700;font-size:16px">商品属性</div>
                        <div  class="skuInput" v-for="(item,index) in goodsSkuJson">
                            <div style="height:32px;display: flex;align-items: center;gap:20px" >
                            <span>规格图{{index+1}}:</span>
                            <div v-if="item.skuImage" @click="changeImage('规格图',index)"  style="height:64px;width:64px;display: flex;
                                    justify-content: center;
                                    align-items: center;">
                                <n-image
                                :preview-disabled="true"
                                style="object-fit: contain;"
                                :src="item.skuImage"/>
                            </div>
                            <div v-else @click="changeImage('规格图',index)" class="imageUpload" style="height:64px;width:64px;">
                                <n-icon size="24" color="rgb(49, 108, 114)">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><g fill="none"><path d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8V2.5z" fill="currentColor"></path></g></svg>
                                </n-icon>
                            </div>
                            </div>
                            <n-input-group>
                            <n-input disabled v-model:value="item.skuName" />
                            <n-input-group-label>规格值</n-input-group-label>
                            </n-input-group>
                            <n-input-group>
                            <n-input v-model:value="item.skuId" />
                            <n-input-group-label>编码</n-input-group-label>
                            </n-input-group>
                            <n-input-group >
                            <n-input v-model:value="item.skuPrice" />
                            <n-input-group-label>价格</n-input-group-label>
                            </n-input-group>
                        
                            <n-input-group >
                            <n-input v-model:value="item.skuStockNum" />
                            <n-input-group-label>库存</n-input-group-label>
                            </n-input-group>
                                
                        </div>
                        </div>
                        </div>
                    </div>

         

            </div>
                </div>
                 <n-form-item class="btn-add">
                    <div style="display: flex;gap:12px;">
                        <n-button attr-type="button" @click="chongzhi(2)">
                            重置
                        </n-button>
                        <n-button attr-type="button" type="primary" @click="handleValidateClickSetp2">
                            校验
                        </n-button>
                    </div>
                </n-form-item>
               
            </n-form>
        </div>
        
      </n-tab-pane>
      <n-tab-pane name="商品详情" tab="商品详情">
        <div class="step1" >
          <div class="item_top">
            <commonEditor style="height:680px" :Image="TextImage" :token="token" @uploadImage="uploadImage" :value="formValue.contents" @change="getEditorValue" />
          <n-form-item class="btn-add">
                    <div style="display: flex;gap:12px;margin-top: 12px;">
                        <n-button attr-type="button" @click="chongzhi(3)">
                           重置
                        </n-button>
                        <n-button attr-type="button" type="primary" @click="handleValidateClick">
                            校验
                        </n-button>
                    </div>
                </n-form-item>
          </div>
         
        </div>
      </n-tab-pane>

      <n-tab-pane name="物流设置" tab="物流设置">
        <div class="step1" >
          <n-form
                ref="formRef"
                :model="formValue"
                :rules="rules"
                class="item_top"
            >
                <n-form-item  label="配送方式" path="goodsType">
                    <n-radio-group v-model:value="formValue.goodsType" >
                        <n-space>
                         <n-radio                   
                            :value="'快递'"
                            :key="'快递'"
                            >
                            快递
                        </n-radio>
                        <n-radio
                            :value="'自提'"
                            :key="'自提'"
                        >
                        自提
                            </n-radio>
                        </n-space>
                    </n-radio-group>
                </n-form-item>

                <n-form-item  label="运费设置" path="distributionType">
                    <n-radio-group v-model:value="formValue.distributionType" >
                        <n-space>
                         <n-radio                   
                            :value="'包邮'"
                            :key="'包邮'"
                            >
                            包邮
                        </n-radio>
                        <n-radio
                            :value="'固定邮费'"
                            :key="'固定邮费'"
                        >
                        固定邮费
                            </n-radio>
                            <n-radio
                            :value="'运费模板'"
                            :key="'运费模板'"
                        >
                        运费模板
                            </n-radio>
                        </n-space>
                    </n-radio-group>
                </n-form-item>

                <n-form-item v-if="formValue.distributionType == '固定邮费'"  label="运费金额" path="distributionFee">
                    
                  <n-input clearable class="item-input" v-model:value="formValue.distributionFee" placeholder="请输入运费" />
                </n-form-item>
  
                 <n-form-item class="btn-add">
                    <div style="display: flex;gap:12px;">
                        <n-button attr-type="button" @click="chongzhi(4)">
                            重置
                        </n-button>
                        <n-button attr-type="button" type="primary" @click="handleValidateClickSetp2">
                            校验
                        </n-button>
                    </div>
                </n-form-item>
               
            </n-form>
        </div>
      </n-tab-pane>

      <n-tab-pane name="营销设置" tab="营销设置">
        <div class="step1" >
          <n-form
                ref="formRef"
                :model="formValue"
                :rules="rules"
                class="item_top"
            >
                
                <n-form-item label="已销数量" >
                  <n-input clearable class="item-input" v-model:value="formValue.goods_sales" placeholder="请输入已售销量" >
                    <template #suffix>已销</template>
                  </n-input>
                </n-form-item>

                <n-form-item label="商品排序" >
                  <n-input clearable class="item-input" v-model:value="formValue.sort" placeholder="请输入商品排序" />
                </n-form-item>

                <n-form-item label="赠送积分" >
                  <n-input clearable class="item-input" v-model:value="formValue.rewardIntegral" placeholder="请输入赠送积分" >
                    <template #suffix>积分</template>
                  </n-input>
                </n-form-item>

                <n-form-item label="赠送优惠券" >

                  <n-input-group>
                  <n-input clearable class="item-input" v-model:value="formValue.gift_coupons_id" placeholder="请选择赠送优惠券" />
                  <n-button @click="List" type="primary" ghost>
                    选择优惠券
                  </n-button>
                  </n-input-group>
              
                </n-form-item>

                <n-form-item label="服务保障" >

              
                <n-checkbox-group :value="formValue.serviceGuarantee_id" @update:value="handleCheckedChange">
                  <div style="display: flex;gap: 12px;">
                    <n-space v-for="(item,index) in ServiceGuaranteeLitOptions" :key="index" item-style="display: flex;" align="center">
                    <n-checkbox :value="item.id" :label="item.title" /> 
                  </n-space>
                  </div>
                </n-checkbox-group>
                    
                  <!-- <n-input clearable class="item-input" v-model:value="formValue.gift_coupons_id" placeholder="请输入已售销量" /> -->
                </n-form-item>

                <n-form-item label="会员可见">
                  <n-switch 
                   
                  v-model:value="formValue.member_see">
                    <template #checked>
                      可见
                    </template>
                    <template #unchecked>
                      关闭
                  </template>
                  </n-switch>
                  <span style="margin-left: 20px;font-size: 12px;color: #ccc;">开启后仅付费会员可以看见并购买此商品</span>
                </n-form-item>

                <n-form-item label="起购数量" >
                  <n-input clearable class="item-input" v-model:value="formValue.start_shopping" placeholder="请输入起购数量" >
                    <template #suffix>件</template>
                    <template #password-invisible-icon></template>
                  </n-input>
                </n-form-item>

                <n-form-item label="是否限购">
                  <n-switch 
                   
                  v-model:value="formValue.is_limitNum">
                    <template #checked>
                      限购
                    </template>
                    <template #unchecked>
                      不限购
                  </template>
                  </n-switch>
                  <span style="margin-left: 20px;font-size: 12px;color: #ccc;">开启后仅付费会员可以看见并购买此商品</span>
                </n-form-item>

                <n-form-item v-if="formValue.is_limitNum" label="限购类型" >
                    <n-radio-group v-model:value="formValue.limitNum_type" >
                        <n-space>
                         <n-radio                   
                            :value="'单次限购'"
                            :key="'单次限购'"
                            >
                            单次限购
                        </n-radio>
                        <n-radio
                            :value="'单人限购'"
                            :key="'单人限购'"
                        >
                        单人限购
                            </n-radio>
                        </n-space>
                    </n-radio-group>
                </n-form-item>

                <n-form-item v-if="formValue.is_limitNum" label="限购数量" >
                  <n-input clearable class="item-input" v-model:value="formValue.limitNum" placeholder="请输入限购数量" >
                    <template #suffix>限购数量</template>
                    <template #password-invisible-icon></template>
                  </n-input>
                </n-form-item>

                <n-form-item label="预售商品">
                  <n-switch 
                   
                  v-model:value="formValue.is_reservation">
                    <template #checked>
                      开启
                    </template>
                    <template #unchecked>
                      关闭
                  </template>
                  </n-switch>
                   
                </n-form-item>


                <n-form-item v-if="formValue.is_reservation" label="预售活动时间" path="goods_status">
                    <div style="display: flex;flex-direction: column;gap: 8px;">
                      <div style="display: flex;align-items: center;gap:12px;margin-left:20px;">
                        <div style="display: flex;align-items: center;gap:12px">
                            <span>预售开始时间:</span>
                            <n-date-picker
                                v-model:formatted-value="formValue.reservation_startTime"
                                value-format="yyyy.MM.dd HH:mm:ss"
                                type="datetime"
                                clearable
                            />
                        </div>

                        <div style="display: flex;align-items: center;gap:12px">
                            <span>预售结束时间:</span>
                            <n-date-picker
                                v-model:formatted-value="formValue.reservation_endTime"
                                value-format="yyyy.MM.dd HH:mm:ss"
                                type="datetime"
                                clearable
                            />
                        </div>
                        
                    </div>
                    <div style="margin-left: 20px;font-size: 12px;color: #ccc;">设置活动开启结束时间，用户可以在设置时间内发起参与预售</div>
                    </div>
                </n-form-item>

                <n-form-item v-if="formValue.is_reservation" label="预计发货时间" >
                  <div style="margin-left:20px;">
                    <span>预售活动结束后</span>
                  <n-input clearable style="width: 200px;" class="item-input" v-model:value="formValue.reservation_send_time" placeholder="活动结束发货时间" >
                   
                  </n-input>
                  <span>之内</span>
                  </div>

                </n-form-item>

                <n-form-item v-if="formValue.is_reservation" label="活动结束后状态">
                  <n-switch 
                  style="margin-left:20px;"
                  v-model:value="formValue.is_reservation_endTime">
                    <template #checked>
                      上架
                    </template>
                    <template #unchecked>
                      下架
                  </template>
                  </n-switch>
                  <span style="margin-left: 20px;font-size: 12px;color: #ccc;">选择上架时，预售活动结束后该商品作为普通商品继续售卖</span>
                </n-form-item>

                <n-form-item label="商品推荐">
                  <n-switch 
                   
                  v-model:value="formValue.goods_recommend">
                    <template #checked>
                      开启
                    </template>
                    <template #unchecked>
                      关闭
                  </template>
                  </n-switch>
                  
                </n-form-item>

                <n-form-item v-if="formValue.goods_recommend" label="选择推荐商品" >

                  <n-input-group>
                  <n-input clearable class="item-input" disabled v-model:value="formValue.goods_recommend_id" placeholder="请选择商品(多选)" />
                  <n-button type="primary" ghost>
                    选择商品
                  </n-button>
                  </n-input-group>

                  </n-form-item>
                

                 <n-form-item class="btn-add">
                    <div style="display: flex;gap:12px;">
                        <n-button attr-type="button" @click="chongzhi(5)">
                            重置
                        </n-button>
                        <n-button attr-type="button" type="primary" @click="handleValidateClickSetp2">
                            校验
                        </n-button>
                    </div>
                </n-form-item>
                
               
            </n-form>
        </div>
      </n-tab-pane>


      <n-tab-pane name="其他设置" tab="其他设置">
        <div class="step1" >
          <n-form
                ref="formRef"
                :model="formValue"
                :rules="rules"
                class="item_top"
            >
                
                <n-form-item label="商品关键字" >
                  <div style="display: flex;flex-direction: column;gap: 8px;">
                    <n-input clearable class="item-input" v-model:value="formValue.keywords" placeholder="请输入商品关键词，可以用,隔开" >
                    <template #suffix>词</template>
                  </n-input>
                  <div style="color: #ccc;font-size: 12px;">通过命中关键字搜索对应商品，方便用户查找</div>
                  </div>
                </n-form-item>

                <n-form-item label="商品简介" >
                  <div style="display: flex;flex-direction: column;gap: 8px;">
                    <n-input type="textarea" clearable class="item-input" v-model:value="formValue.goods_introduction" placeholder="请输入商品简介" >
                    
                  </n-input>
                  <div style="color: #ccc;font-size: 12px;">微信分享商品时，分享的卡片上会显示商品简介 查看示例</div>
                  </div>
                  
                </n-form-item>

                <n-form-item label="分销文案" >
                  <div style="display: flex;flex-direction: column;gap: 8px;">
                    <n-input type="textarea" clearable class="item-input" v-model:value="formValue.goods_distribution_text" placeholder="请输入分销文案" >
                    
                  </n-input>
                
                  </div>
                  
                </n-form-item>

                <n-form-item label="商品口令" >
                  <div style="display: flex;flex-direction: column;gap: 8px;">
                    <n-input type="textarea" clearable class="item-input" v-model:value="formValue.goods_command" placeholder="请输入商品口令" >
                    
                  </n-input>
                  <div style="color: #ccc;font-size: 12px;">可将淘宝、抖音等平台的口令复制在此处，用户点击商城商品详情后会自动复制口令，随后打开淘宝等平台会自动弹出口令弹窗 查看示例</div>
                  </div>
                  
                </n-form-item>
                

                <n-form-item label="商品推荐图" >
                  <div @click="changeImage('商品推荐图',0)" v-if="formValue.goods_recommend_image" style="height:135px;width:100px;overflow: hidden;display: flex;padding:0px;
                      justify-content: center; align-items: center;">
                      <n-image
                      :preview-disabled="true"
                      style="object-fit: contain;display: flex;
                          justify-content: center;
                          align-items: center;border: 1px solid #eee;"
                      :src="Https()+formValue.goods_recommend_image"/>
                  </div>
                  <div v-else @click="changeImage('商品推荐图',0)" class="imageUpload">
                  <n-icon size="24" color="rgb(49, 108, 114)">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><g fill="none"><path d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8V2.5z" fill="currentColor"></path></g></svg>
                  </n-icon>
                  </div>
                    </n-form-item>
                

                 <n-form-item class="btn-add">
                    <div style="display: flex;gap:12px;">
                        <n-button attr-type="button" @click="chongzhi(6)">
                            重置
                        </n-button>
                        <n-button attr-type="button" type="primary" @click="submit">
                            完成
                        </n-button>
                    </div>
                </n-form-item>
                
               
            </n-form>
        </div>
      </n-tab-pane>
    </n-tabs>
  </n-card>
      
       
      <yingModal  :title="'选择图片'" @close="uploadShow=false" @confirm="uploadShow=false" :SkuShow="uploadShow" >
          <template #content>
            <Upload type="1" @selectImage="selectImageFun"/>
          </template>
      </yingModal>
        

        <yingModal :width="'500px'" :height="'400px'" :title="'新增商品规格模版'" @close="skuShow=false" @confirm="confirm_skuForms" :SkuShow="skuShow" >
          <template #content>
            <div>
               <n-form
                ref="formRef_template"
                :model="skuForm"
                :rules="skuForm_rules"
                class="item_top"
              >
                <n-form-item  label="模版名称" path="templateName">
                    <n-input style="width:100%" v-model:value="skuForm.templateName" />
                </n-form-item>
                <n-form-item  label="模版内容" path="templateName">
                    <n-input style="width:100%" disabled v-model:value="skuForm.content" />
                </n-form-item>
                <n-form-item  label="模版规格" >
                    <n-input style="width:100%" disabled v-model:value="skuForm.goods_sku" />
                </n-form-item>
                <n-form-item  label="模版属性" >
                    <n-input style="width:100%" disabled v-model:value="skuForm.goods_attribute" />
                </n-form-item>
               </n-form>

            </div>
          </template>
      </yingModal>
    </div>
</template>
<script setup lang="ts" >
import yingModal from '@/components/common/YingModal.vue'
import type { FormInst } from 'naive-ui'
import { NAvatar, NButton, NImage, NSwitch, NTag,CascaderOption  } from 'naive-ui'
import { nextTick, onMounted, ref,createApp,defineComponent  } from 'vue'
import { Https,setPagination,goodsTypeOptions } from "@/utils"
import commonEditor from '@/components/common/commonEditor.vue'
import Upload from "@/views/upload/index.vue"
import { sortList } from '@/utils/common.js'
import api from './api'
import TagReturn from "@/components/common/tabReturn.vue"
import { globalStore } from '@/store';
const router = useRouter()
const globalStoreData = globalStore();
const formRef = ref<FormInst | null>(null)
const formRef_template = ref<FormInst | null>(null)
const uploadShow = ref(false)
const imageSelectName = ref('')
const label_idsList = ref(null)
const settingShow = ref(false)
const skuShow = ref(false)
const goodsTherJson = ref([])
const skuIndex = ref('')
const TextImage = ref('')
const goodsSkuList= ref([])
const serviceGuarantee_id= ref([])
const goodsSkuValue= ref(null);
const token = ref('')
const filterable = ref(true);
const showPath = ref(true);
const checkStrategyIsChild = ref(true);
const hoverTrigger = ref(false)
const options = ref([])
const title = ref('基础信息')
onMounted(()=>{

  goodsSkuTemplateList();
  getOptions();
  getOptions_type();
  storeList();
  goodsLabelList();
  
  token.value = JSON.parse(localStorage.getItem("vue-naivue-admin_auth"))['token']
})


const goodsSkuJsonSum = ref(
  {
    skuId:'',
    skuName:'',
    skuPrice:'',
    skuStockNum:'',
    skuImage:''
  }
)
const goodsSkuJson = ref([
  {
    skuId:'',
    skuName:'',
    skuPrice:'',
    skuStockNum:'',
    skuSort:0,
    skuImage:''
  }
])
const step = ref(1)
const formValue = ref({
    goodsName: '',
    goods_type:null,
    categoryId:null,
    businessId:null,
    goods_unit:null,
    goods_unit_num:'',
    goods_code:'',
    rotationImgsJson:[],
    label_ids:null,
    goods_status:'立即上架',
    goodsBeginTime:null,
    goodsEndingTime:null,
    goodsSkuType:'单规格',
    goodsSkuJson:[],
    previewUrl:'',
    goodsPrice:'',
    scribePrice:'',
    stockNum:'',
    goods_number:'',
    goods_barCode:'',
    goodsWeight:'',
    goods_volume:'',
    contents:'',
    goodsType:'快递',
    distributionType:'包邮',
    distributionFee:'',
    goods_sales:0,
    sort:0,
    rewardIntegral:0,
    gift_coupons_id:'',
    serviceGuarantee_id:'',
    member_see:false,
    start_shopping:'',
    is_limitNum:false,
    limitNum:1,
    limitNum_type:'单次限购',
    is_reservation:false,
    reservation_startTime:null,
    reservation_endTime:null,
    reservation_send_time:'',
    is_reservation_endTime:false,
    goods_recommend:false,
    goods_recommend_id:'',
    keywords:'',
    goods_introduction:'',
    goods_distribution_text:'',
    goods_command:'',
    goods_recommend_image:''
})
const skuForm = ref({
    content: '',
    goods_sku: '',
    goods_attribute: '',
    templateName: '',
    status:'1'
})
const skuForm_rules = {
  templateName: {
    required: true,
    message: '请输入模版名称',
    trigger: 'blur'
  },
  goods_attribute: {
    required: true,
    message: '请输入模版属性',
    trigger: 'blur'
  },
  goods_sku: {
    required: true,
    message: '请输入模版规格',
    trigger: 'blur'
  },
  content: {
    required: true,
    message: '请输入模版内容',
    trigger: 'blur'
  },
}
const goodsTypeOption =[
    {
        value: '1',
        label: '普通商品',
    },
    {
        value: '2',
        label: '积分商品',
    },
    {
        value: '3',
        label: '其它商品',
    },
    {
        value: '4',
        label: '补录商品',
    },
]
const goodsCategoryOptions =[]
const goodsbusinessIdOptions =[]
const goodsLabelIdOptions =ref([
    {
        value: '1',
        label: '商品推荐',
    }
])
const goodsunitIdOptions = [
    {
        value: '件',
        label: '件',
    },
    {
        value: '个',
        label: '个',
    },
    {
        value: '斤',
        label: '斤',
    },
    {
        value: '其它',
        label: '其它',
    },
]

const rules = {
  goodsName: {
    required: true,
    message: '请输入商品名称',
    trigger: 'blur'
  },
  goodsType: {
    required: true,
    message: '请选择配送方式',
    trigger: 'blur'
  },
  distributionType: {
    required: true,
    message: '请选择运费设置',
    trigger: 'blur'
  },
  distributionFee: {
    required: true,
    message: '请选择运费设置',
    trigger: 'blur'
  },
   goodsPrice: {
    required: true,
    message: '请输入商品价格',
    trigger: 'blur'
  },
   stockNum: {
    required: true,
    message: '请输入商品库存',
    trigger: 'blur'
  },
  previewUrl: {
    required: true,
    message: '请上传图片',
    trigger: 'blur'
  },
    goods_status: {
    required: true,
    message: '请选择上架方式',
    trigger: 'blur'
  },
   goodsSkuType: {
    required: true,
    message: '请选择规格',
    trigger: 'blur'
  },
  goods_type: {
    required: true,
    message: '请选择商品类型',
    trigger: ['blur', 'change']
  }
}
const skuDelete1 = (item,index,item1,index1) =>{
    // 通过索引删除数组元素
  // goodsSkuJson.value.splice(index, 1);

  // 通过过滤器删除数组元素
  goodsTherJson.value[index].list = goodsTherJson.value[index].list.filter((item2, index2) => index2 !== index1);
  if(goodsTherJson.value[index].list.length == 0){
    goodsTherJson.value = goodsTherJson.value.filter((item2, index2) => index2 !== index);
  }
}
const old_options = ref([])
async function getOptions_type() {
    const res: any = await api.typeOptionApi()
    if(res.code == 200) {
      options.value = goodsTypeOptions(res.data.list,res.data.children,'options')
      old_options.value = res.data.list
   
    } 
     
}

async function goodsLabelList() {
    const res: any = await api.goodsLabelListApi({pageNum:1,pageSize:100})
    if(res.code == 200) {
      goodsLabelIdOptions.value = res.data.list
    } 
     
}

const ServiceGuaranteeLitOptions = ref([])

async function getOptions() {
    
    const res: any = await api.goodsServiceGuaranteeListApi({
      page:1,
      pageSize:100
    })
    if(res.code == 200) {
      ServiceGuaranteeLitOptions.value = res.data.list
    }
     
}

const handleCheckedChange = (e) =>{
  formValue.value.serviceGuarantee_id = e
  // serviceGuarantee_id.value = e
}


const skuAdd = (e) =>{
    console.log(goodsTherJson.value,goodsSkuJson.value)
    skuForm.value.goods_sku = JSON.stringify(goodsTherJson.value)
    skuForm.value.goods_attribute = JSON.stringify(goodsSkuJson.value)
    skuForm.value.content = JSON.stringify({
        list:goodsTherJson.value,
        list1:goodsSkuJson.value
      })
    skuShow.value = true;
}
const addGoodsTherSkuItem = (item,index,item1,index1) =>{
  
  goodsTherJson.value[index].list.push({
    skuId:'',
    skuName:'',
    skuSort:0,
  })
  
}

const skuSrotFun1 = (item,index) =>{
      // sortList 排序函数    1.排序方式,2.列表，3.排序字段
  goodsTherJson.value[index].list = sortList('asc',goodsTherJson.value[index].list,'skuSort')
}
const selectImageFun =(selectImageList) =>{
  console.log(selectImageList,imageSelectName.value)
   if(imageSelectName.value == '轮播图'){
       formValue.value.rotationImgsJson = selectImageList
   }else if(imageSelectName.value == '预览图'){
       formValue.value.previewUrl = selectImageList[0]
   }
   else if(imageSelectName.value == '规格图'){
        goodsSkuJson.value[skuIndex.value].skuImage = Https() + selectImageList[0];
    }
    else if(imageSelectName.value == '一键规格图'){
        goodsSkuJsonSum.value.skuImage = Https() + selectImageList[0];
    }
    else if(imageSelectName.value == '富文本'){
      TextImage.value = Https() + selectImageList[0];
    }
    else if(imageSelectName.value == '商品推荐图'){
      formValue.value.goods_recommend_image = selectImageList[0];
    }
    
    uploadShow.value = false;

} 

const getEditorValue = (data) => {
 
 formValue.value.contents = data
}

const uploadImage = () =>{
  imageSelectName.value = "富文本"
  uploadShow.value = true;
}
function changeImage(type,index) {
  imageSelectName.value = type
  uploadShow.value = true
  if(type == '规格图'){
    skuIndex.value = index;
  }
  
  
}
// function changeImage(type,index) {
  
//   if(type == '规格图'){
//     skuIndex.value = index;
//   }
//   typeImage.value = type
//   uploadShow.value = true
// }

async function submit() {
    const data:any = formValue.value
    // data.rotationImgsJson = JSON.stringify(formValue.value.rotationImgsJson)
    if(goodsTherJson.value.length && goodsSkuJson.value.length){
      data.goodsSkuJson = JSON.stringify({
        list:goodsTherJson.value,
        list1:goodsSkuJson.value
      })
    }else{
      data.goodsSkuJson = ''
    }
    
    if(formValue.value.rotationImgsJson.length){
      data.rotationImgsJson = JSON.stringify(formValue.value.rotationImgsJson)
    }else{
      data.rotationImgsJson = ''
    }
   
    if(data.label_ids != null ){
      data.label_ids = JSON.stringify(formValue.value.label_ids)
    }

   
    if(data.label_ids != null ){
      data.serviceGuarantee_id = JSON.stringify(formValue.value.serviceGuarantee_id)
    }
  
    const res: any = await api.AddApi(data)
    if(res.code == 200) {
       $message.success('添加成功!')
       router.push({
        path:'/goods/index',
      })
    }else{
       $message.error('添加失败!')
    }
     
}


const handleUpdateValue = (value: string, option: CascaderOption) => {
  console.log(value, option)
  formValue.value.categoryId = value
}


const chongzhi =(number) =>{
    if(number == 1){
      formValue.value.goodsName = ''
      formValue.value.goods_type = null
      formValue.value.categoryId = null
      formValue.value.businessId = null
      formValue.value.goods_unit = null
      formValue.value.goods_unit_num = ''
      formValue.value.goods_code = ''
      formValue.value.goods_status = '立即上架'
      formValue.value.goodsBeginTime = null
      formValue.value.goodsEndingTime = null
      formValue.value.rotationImgsJson = []
    }
    if(number == 2){
      formValue.value.goodsSkuType = '单规格'
      formValue.value.previewUrl = ''
      formValue.value.goodsPrice = ''
      formValue.value.scribePrice = ''
      formValue.value.stockNum = ''
      formValue.value.goods_number = ''
      formValue.value.goods_barCode = ''
      formValue.value.goodsWeight = ''
      formValue.value.goods_volume = ''
      formValue.value.goodsSkuJson = []
      goodsTherJson.value = []
      goodsSkuJson.value = []
    }
    if(number == 3){
      formValue.value.contents = ''
    }
    if(number == 4){
      formValue.value.goodsType = '快递'
      formValue.value.distributionType = '包邮'
      formValue.value.distributionFee = ''
      
    }
    if(number == 5){
      formValue.value.goods_sales = 0
      formValue.value.sort = 0
      formValue.value.rewardIntegral = 0
      formValue.value.gift_coupons_id = ''
      serviceGuarantee_id.value = []
      formValue.value.member_see = false
      formValue.value.start_shopping = ''
      formValue.value.is_limitNum = false
      formValue.value.limitNum_type = '单次限购'
      formValue.value.limitNum = 1
      formValue.value.is_reservation = false
      formValue.value.reservation_startTime = null
      formValue.value.reservation_endTime = null
       formValue.value.reservation_send_time = ''
       formValue.value.is_reservation_endTime = false
       formValue.value.goods_recommend = false
    }
    
    
} 

const storeOptions = ref([])
async function storeList() {
    const res: any = await api.storeListApi({
      pageNum:1,
      pageSize:300
    })
    if (res.code == 200) {
      storeOptions.value = res.data.list.map(item=>{
        return{
          label:item.businessName,
          value:item.businessId
        }
      })
    }
    
}

const settingPrice = (type) =>{
 
  // goodsSkuJson.value = []
//   if(type == '2'){
//     settingShow.value = !settingShow.value;
//     return
//   }

  

  const newData = []
//   if(!settingShow.value){
    if(goodsTherJson.value.length == 1){
      for (let index = 0; index < goodsTherJson.value[0].list.length; index++) {
        newData.push({
          skuId:`uuid${Math.round(Math.random()*100000000000000)}`,
          skuName: `${goodsTherJson.value[0].list[index].skuName}`,
          skuImage:'',
          skuPrice:'',
          skuStockNum:'',
        })
      }
    }
    if(goodsTherJson.value.length == 2){
      for (let index = 0; index < goodsTherJson.value[0].list.length; index++) {
        for (let index1 = 0; index1 < goodsTherJson.value[1].list.length; index1++) {
          newData.push({
            skuId:`uuid${Math.round(Math.random()*100000000000000)}`,
            skuName: `${goodsTherJson.value[0].list[index].skuName},${goodsTherJson.value[1].list[index1].skuName}`,
            skuImage:'',
            skuPrice:'',
            skuStockNum:'',
          })
        }
      }
    }

    if(goodsTherJson.value.length == 3){
      for (let index = 0; index < goodsTherJson.value[0].list.length; index++) {
        for (let index1 = 0; index1 < goodsTherJson.value[1].list.length; index1++) {
          for (let index2 = 0; index2 < goodsTherJson.value[2].list.length; index2++) {
            console.log(Math.random())
            newData.push({
              skuId:`uuid${Math.round(Math.random()*100000000000000)}`,
              skuName: `${goodsTherJson.value[0].list[index].skuName},${goodsTherJson.value[1].list[index1].skuName},${goodsTherJson.value[2].list[index2].skuName}`,
              skuImage:'',
              skuPrice:'',
              skuStockNum:'',
            })
            
          }
          
        }
      }
    // }
  }

  
  setTimeout(()=>{
    goodsSkuJson.value = newData;
    // settingShow.value = !settingShow.value;
  },1000)
}
async function goodsSkuTemplateList(){
  const res: any = await api.goodsSkuTemplateListApi({
    pageNum:1,
    pageSize:100
  })
  if(res.code == 200){
    goodsSkuList.value = res.data.list
  }

}


async function skuTemplateAdd(){
  const res: any = await api.goodsSkuTemplateAddApi(skuForm.value)
  if(res.code == 200){
    $message.success('添加成功!')
    goodsSkuValue.value = null;
    goodsSkuTemplateList();
    skuShow.value = false;
  }else{
    $message.error('添加失败!')
  }

}

const confirm_skuForms = () =>{
    // 选择框得字符串类型才能通过校验
    formRef_template.value?.validate((errors) => {
        if (!errors) {
            skuTemplateAdd(); 
        }
        else {
        console.log(errors)
            $message.error('验证失败')
        }
    })
}
const handleValidateClick = () =>{
    // 选择框得字符串类型才能通过校验
     
    formRef.value?.validate((errors) => {
        if (!errors) {
           
            $message.success('验证成功')
        }
        else {
        console.log(errors)
            $message.error('验证失败')
        }
    })
}
const handleValidateClickSetp2 = () =>{
    console.log(goodsSkuJson.value)
    console.log(goodsTherJson.value)
    // 选择框得字符串类型才能通过校验
    formRef.value?.validate((errors) => {
        if (!errors) {
         
            $message.success('验证成功')
        }
        else {
        console.log(errors)
            $message.error('验证失败')
        }
    })
}
const yijianData = () =>{
    const newData = []
    console.log(goodsSkuJsonSum.value,goodsTherJson.value,goodsSkuJson.value)

    for (let index = 0; index < goodsSkuJson.value.length; index++) {
      console.log("未修改",goodsSkuJson.value[index])
      goodsSkuJson.value[index].skuId = `uuid${Math.round(Math.random()*100000000000000)}`
      goodsSkuJson.value[index].skuImage = goodsSkuJsonSum.value.skuImage?goodsSkuJsonSum.value.skuImage:goodsSkuJson.value[index].skuImage
      goodsSkuJson.value[index].skuPrice = goodsSkuJsonSum.value.skuPrice?goodsSkuJsonSum.value.skuPrice:goodsSkuJson.value[index].skuPrice
      goodsSkuJson.value[index].skuStockNum = goodsSkuJsonSum.value.skuStockNum?goodsSkuJsonSum.value.skuStockNum:goodsSkuJson.value[index].skuStockNum
      console.log("修改过",goodsSkuJson.value[index])
    }
  //   if(goodsTherJson.value.length == 1){
  //     for (let index = 0; index < goodsTherJson.value[0].list.length; index++) {
  //       newData.push({
  //         id:`uuid${Math.round(Math.random()*100000000000000)}`,
  //         value: `${goodsTherJson.value[0].list[index].skuName}`,
  //         image:goodsSkuJsonSum.value.image?goodsSkuJsonSum.value.image:goodsTherJson.value[0].list[index].image,
  //         price:goodsSkuJsonSum.value.price?goodsSkuJsonSum.value.price:goodsTherJson.value[0].list[index].price,
  //         stock:goodsSkuJsonSum.value.stock?goodsSkuJsonSum.value.stock:goodsTherJson.value[0].list[index].stock,
  //       })
  //     }
  //   }
  //   if(goodsTherJson.value.length == 2){
      
  //     for (let index = 0; index < goodsTherJson.value[0].list.length; index++) {
  //       for (let index1 = 0; index1 < goodsTherJson.value[1].list.length; index1++) {
  //         newData.push({
  //           id:`uuid${Math.round(Math.random()*100000000000000)}`,
  //           value: `${goodsTherJson.value[0].list[index].skuName},${goodsTherJson.value[1].list[index1].skuName}`,
  //           image:goodsSkuJsonSum.value.image?goodsSkuJsonSum.value.image:goodsTherJson.value[0].list[index].image,
  //           price:goodsSkuJsonSum.value.price?goodsSkuJsonSum.value.price:goodsTherJson.value[0].list[index].price,
  //           stock:goodsSkuJsonSum.value.stock?goodsSkuJsonSum.value.stock:goodsTherJson.value[0].list[index].stock,
  //         })
  //       }
  //     }
  //   }

  //   if(goodsTherJson.value.length == 3){
  //     for (let index = 0; index < goodsTherJson.value[0].list.length; index++) {
  //       for (let index1 = 0; index1 < goodsTherJson.value[1].list.length; index1++) {
  //         for (let index2 = 0; index2 < goodsTherJson.value[2].list.length; index2++) {
  //           newData.push({
  //             id:`uuid${Math.round(Math.random()*100000000000000)}`,
  //             value: `${goodsTherJson.value[0].list[index].skuName},${goodsTherJson.value[1].list[index1].skuName},${goodsTherJson.value[2].list[index2].skuName}`,
  //             image:goodsSkuJsonSum.value.image?goodsSkuJsonSum.value.image:goodsTherJson.value[0].list[index].image,
  //             price:goodsSkuJsonSum.value.price?goodsSkuJsonSum.value.price:goodsTherJson.value[0].list[index].price,
  //             stock:goodsSkuJsonSum.value.stock?goodsSkuJsonSum.value.stock:goodsTherJson.value[0].list[index].stock,
  //           })
            
  //         }
          
  //       }
  //     }
  //   // }
  // }

  
  // setTimeout(()=>{
  //   goodsSkuJson.value = newData;
  // },1000)
}

const selectGoodsSku = (e) =>{
  if(e)
    goodsSkuTemplateDetails(e);
  else{
    goodsTherJson.value = []
    goodsSkuJson.value = []
    
  }
}

async function goodsSkuTemplateDetails(id){
  const res: any = await api.goodsSkuTemplateDetailsApi({id:id})
  if(res.code == 200){
   console.log(res.data.list)
   if(res.data.list.length){
    goodsTherJson.value = JSON.parse(res.data.list[0].goods_sku)
    goodsSkuJson.value = JSON.parse(res.data.list[0].goods_attribute)
   }
  }

}
 
const skuChongzhi = () =>{
    const newData = []
//   if(!settingShow.value){
    if(goodsTherJson.value.length == 1){
      for (let index = 0; index < goodsTherJson.value[0].list.length; index++) {
        newData.push({
          skuId:`uuid${Math.round(Math.random()*100000000000000)}`,
          skuName: `${goodsTherJson.value[0].list[index].skuName}`,
          skuImage:'',
          skuPrice:'',
          skuStockNum:'',
        })
      }
    }
    if(goodsTherJson.value.length == 2){
      for (let index = 0; index < goodsTherJson.value[0].list.length; index++) {
        for (let index1 = 0; index1 < goodsTherJson.value[1].list.length; index1++) {
          newData.push({
            skuId:`uuid${Math.round(Math.random()*100000000000000)}`,
            skuName: `${goodsTherJson.value[0].list[index].skuName},${goodsTherJson.value[1].list[index1].skuName}`,
            skuImage:'',
            skuPrice:'',
            skuStockNum:'',
          })
        }
      }
    }

    if(goodsTherJson.value.length == 3){
      for (let index = 0; index < goodsTherJson.value[0].list.length; index++) {
        for (let index1 = 0; index1 < goodsTherJson.value[1].list.length; index1++) {
          for (let index2 = 0; index2 < goodsTherJson.value[2].list.length; index2++) {
            console.log(Math.random())
            newData.push({
              skuId:`uuid${Math.round(Math.random()*100000000000000)}`,
              skuName: `${goodsTherJson.value[0].list[index].skuName},${goodsTherJson.value[1].list[index1].skuName},${goodsTherJson.value[2].list[index2].skuName}`,
              skuImage:'',
              skuPrice:'',
              skuStockNum:'',
            })
            
          }
          
        }
      }
    // }
  }

  
  setTimeout(()=>{
    goodsSkuJson.value = newData;
    // settingShow.value = !settingShow.value;
  },1000)

}

const addGoodsTherSku = () =>{
try{
  if(goodsTherJson.value.length >=3){
    return
  }
  goodsTherJson.value.push({
    name:'其它规格',
    list:[
       {
        skuId:'',
        skuName:'',
        skuSort:0,
      }
    ]
  })
}catch(e) {

   goodsTherJson.value = []
  goodsTherJson.value.push({
    name:'其它规格',
    list:[
       {
        skuId:'',
        skuName:'',
        skuSort:0,
      }
    ]
  })
}
  
}

</script>
<style scoped lnag="scss">
 
.item_top{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.goodsAdd_box{
    padding: 12px;
     width: 100%;
     height: 100vh;
     overflow-y: scroll;
     position: relative;
}
.step1{
    margin: 20px 0;
    border: 1px #eee solid;
    border-radius: 6px;
    padding: 16px;
    gap: 20px;
    width: 100%;
    position: relative;
}
.item-input{
    width: 680px;
}
.imageUpload{
  width:100px;
  height:100px;
  border:1px solid #eee;
  display: flex;
  justify-content: center;
  border-radius: 6px;
  align-items: center;
}
.imageUpload:hover{
  border:1px solid rgb(49, 108, 114);
}
.btn-add{
    /* width: 100vw; */
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.skuInput{
  position: relative;
  border:1px solid #eee;
  
  padding: 20px 12px;
  gap: 12px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  transition-property: background;
  transition-duration: 0.25s, 0.5s; 
  
}
.skuInput:hover{
  background: #eee;
  .skuDelete{
    display: flex;
  }
}
.skuDelete{
  position: absolute;
  top: -20px;
  right:0px;
  display: none;
}
.skubitian{
  padding: 10px 0;
  .skuTitle{
    font-size: 16px;
    font-weight: bold;
    padding:10px 0;
  }
}
 
</style>